<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    {% load static %}
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{% static './layui/layui.js' %}"></script>
</head>
<body>
<form class="layui-form" action="" style="margin: 30px">
  <div class="layui-form-item">
    <label class="layui-form-label"> 登录账号（工号）：</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="job_number" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"> 密码：</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="password" name="password" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"> 姓名：</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="username" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别：</label>
    <div class="layui-input-inline">
      <select name="gender" lay-filter="gender">
        <option value=""></option>
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">岗位：</label>
    <div class="layui-input-inline">
      <select name="post" lay-filter="post">
        <option value=""></option>
        {% for temp in post_list %}
          <option value="{{temp.id}}">{{temp.post_name}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">来源：</label>
    <div class="layui-input-inline">
      <select name="source" lay-filter="source">
        <option value=""></option>
        <option value="1">外招</option>
        <option value="2">内聘用</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">管理区域：</label>
    <div class="layui-input-block">
      <input type="checkbox" name="manage_area" value="1" lay-skin="tag" title="广州新华1号宿舍楼" checked>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"> 联系方式：</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="phone" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"> 身份证号：</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="id_num" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">任职日期：</label>
        <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" name="office_date" id="office_date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">离职日期：</label>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" name="off_office_date" id="off_office_date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">启用</label>
    <div class="layui-input-block">
      <input type="checkbox" name="status" lay-skin="switch" lay-filter="switchTest" title="1|2">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script>
  layui.use(['form','laydate'],function () {
    var form = layui.form;
    var laydate = layui.laydate;

    // 任职日期
    laydate.render({
      elem: '#office_date'
    });

    // 离职日期
    laydate.render({
      elem: '#off_office_date'
    });

    //监听提交
    form.on('submit(demo1)', function(data){
        var job_number = data.field['job_number']
        var password = data.field['password']
        var username = data.field['username']
        var gender = data.field['gender']
        var post = data.field['post']
        var source = data.field['source']
        var manage_area = data.field['manage_area']
        var phone = data.field['phone']
        var id_num = data.field['id_num']
        var office_date = data.field['office_date']
        var off_office_date = data.field['off_office_date']
        var status = data.field['status']

        $.ajax({
          method: "POST",
          url: "{%url 'xyss_admin:userAddApi' %}",
          data: { job_number: job_number,
            password: password,
            username: username,
            gender: gender,
            post: post,
            source: source,
            manage_area: manage_area,
            phone: phone,
            id_num: id_num,
            office_date: office_date,
            off_office_date: off_office_date,
            status: status,
          },
          success: function (res) {
              if(res['code'] == 0){
                  layer.msg(res['msg'],{time:2000},
                      function(){
                          parent.layer.closeAll()
                          parent.location.reload();
                      }
                  );
              }else{
                  layer.msg(res['msg']);
              }
          },
          error: function(res) {
              console.log("失败了: " + res['msg']);
          }
        });
        return false;
    });
    })
</script>
</html>